<template>
  <div class="personData">
    <Navi title="个人信息" back="1"></Navi>
    <div class="contents">
      <div class="changePhoto-box">
        <div class="left">更换头像</div>
        <div class="right">
          <div class="photo-bg" @click.stop="click_file()">
            <img class="imgs-bg" :src="personMsg.headIcon || require('../../assets/default_head.png')"/>
          </div>
          <div class="arrow-box">
            <img class="arrow" :src="require('../../assets/right-gray.png')" />
          </div>
        </div>
      </div>
      <div class="changeName-box list-box">
        <div class="left">昵称</div>
        <div class="right">
          <input
            v-model="personMsg.nickname"
            type="text"
            required
            min="0"
            max="100"
            @blur="check($event)"
            :disabled="style == 'default'"
          />
        </div>
      </div>
      <div class="changeTel-box list-box">
        <div class="left">签名</div>
        <div class="right"><input
            v-model="personMsg.signature"
            type="text"
            required
            min="0"
            max="100"
            @blur="check($event)"
            :disabled="style == 'default'"
          /></div>
      </div>
      <div class="changeTel-box list-box">
        <div class="left">生日</div>
        <div class="right">
          <input
            type="date"
            value="2014-01-13"
            @change="birthday($event)"
            :disabled="style == 'default'"
          />
        </div>
      </div>
      <div class="changeTel-box list-box">
        <div class="left">性别</div>
        <div class="right">
          <form action="">
            <input
              type="radio"
              name="radio"
              value="1"
              id=""
              :checked="personMsg.sex == 1"
              @click="personMsg.sex = 1"
              :disabled="style == 'default'"
            />男
            <input
              style="margin-left: 90rem"
              type="radio"
              name="radio"
              value="0"
              :checked="personMsg.sex == 0"
              @click="personMsg.sex = 1"
              :disabled="style == 'default'"
            />女
          </form>
        </div>
      </div>
    </div>
    <div class="cover" v-show="false">
      <form>
        <textarea
          v-model="personMsg.signature"
          cols="30"
          rows="10"
          :placeholder="placeholder"
          :disabled="style == 'default'"
        ></textarea>
      </form>
    </div>
    <footer v-show="style === 'default'">
      <button style="background:rgb(46, 127, 193)" @click.stop="changeMsgBtn()">修改</button>
    </footer>
    <footer class="operation" v-show="style != 'default'">
      <button
        @click.stop="cancleChange()"
        style="background: linear-gradient(45deg, #c31432, #240b36)"
      >
        取消
      </button>
      <button
        @click.stop="submit()"
        style="background: linear-gradient(to right, #00f260, #0575e6)"
      >
        提交
      </button>
    </footer>
    <input
      style="display: none"
      type="file"
      ref="file"
      accept="image/jpg,image/png,,image/jpeg"
      @change="upload_img($event)"
    />
  </div>
</template>
<script setup>
import { reactive, ref, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const userData=JSON.parse(sessionStorage.getItem('user_data'))
const personMsg = reactive({
	headIcon:userData.head_icon,
  nickname: userData.name,
  phone: "",
  signature: userData.Personal_signature,
  birthday: userData.birthday,
  sex: userData.birthday
});
const changeMsg = reactive({
	headIcon:"",
  nickname: "123",
  phone: "",
  signature: "",
  birthday: "",
  sex: ""
});
let placeholder = ref("输入您的昵称");
let show_change = ref("name");
let style = ref("default");
const ready = () => {};
let check = (e) => {
  console.log(e);
};
const birthday = (e) => {
  personMsg.birthday = e.target.value;
};
const click_file = () => {
	if(style.value==='default'){
		return false
	}
  proxy.$refs.file.click();
};
const changeMsgBtn = () => {
	let keyList=Object.keys(personMsg)
	keyList.forEach(item=>{
		changeMsg[item]=personMsg[item]
	})
	style.value = "change";
};
const cancleChange = () => {
	
	let keyList=Object.keys(personMsg)
	keyList.forEach(item=>{
		personMsg[item]=changeMsg[item]
	})
  style.value = "default";
  
};
const submit = () => {
	if(!personMsg.nickname&&!personMsg.headIcon){
		return
	}
  proxy.$ajax.post('change_my_date',personMsg,res=>{
		style.value = "default";
    proxy.$ajax.get('getUserData',{},(res)=>{
        console.log(res)
        sessionStorage.setItem('user_data',JSON.stringify(res.data))
      })
	})
};
const upload_img = (e) => {
  console.log(e)
  let files = e.target.files[0];
  proxy.$ajax.upload(files, (res) => {
    personMsg.headIcon=res.url
  });
};
</script>

<style scoped lang="less">
// 字体
// @import "../../../static/scss/font.css";

input {
  text-align: right;
  font-size: 28rem;
}
.zw {
  width: 750rem;

  position: fixed;
  top: 0rem;
  left: 0rem;
  background-color: white;
}
.hbyOccurFlag {
  position: absolute;
  top: 500rem;
  left: 150rem;
  background-color: green;
  width: 450rem;
  height: 100rem;
  line-height: 100rem;
  background-color: #000;
  color: #fff;
  text-align: center;
  opacity: 0.7;
  border-radius: 20rem;
}
.personData {
  height: 100vh;
  overflow: hidden;
}
.zwPosition {
  width: 750rem;
  height: 75rem;
  margin-top: var(--status-bar-height);
}
.station {
  width: 750rem;
  height: 75rem;
  background-color: #fff;
  margin-top: var(--status-bar-height);
}
.sale-title {
  .left {
    width: 100rem;
    height: 75rem;
    line-height: 75rem;
    position: absolute;
    padding-left: 30rem;
    top: 7.5rem;
  }
  .img {
    display: block;
    width: 30rem;
    height: 30rem;
    margin-top: 23rem;
  }
}
.news-title {
  border-bottom: 10rem solid #f2f2f2;
  .left {
    width: 60rem;
    height: 75rem;
    line-height: 75rem;
    position: absolute;
    left: 30rem;
    top: 7.5rem;
  }
  .img {
    display: block;
    width: 19rem;
    height: 30rem;
    margin-top: 23rem;
    border-radius: 50%;
  }
}
.personData {
  height: 100vh;
  background-color: #f2f2f2;
  overflow: hidden;
  .contents {
    width: 750rem;
    background-color: #fff;
    .changePhoto-box {
      display: flex;
      width: 750rem;
      height: 198rem;
      padding: 0rem 30rem;
      box-sizing: border-box;
      align-items: center;
      justify-content: space-between;
      border-bottom: 2rem solid #f2f2f2;
      border-top: 10rem solid #f2f2f2;
      .left {
        color: #303133;
        font-size: 28rem;
        font-weight: bold;
        
      }
      .right {
        width: 200rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .photo-bg {
          .imgs-bg {
            display: block;
            width: 139rem;
            height: 139rem;
            border-radius: 8rem;
          }
        }
        .arrow-box {
          width: 53rem;
          height: 56rem;
          .arrow {
            display: block;
            width: 36rem;
            height: 36rem;
            margin: 10rem 15rem;
          }
        }
      }
    }
    .list-box {
      width: 750rem;
      height: 98rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0rem 30rem;
      box-sizing: border-box;
      color: #303133;
      font-size: 28rem;
      border-bottom: 1px solid #f8f8f8;
      .left {
        font-weight: bold;
      }
      .right {
        display: flex;
        height: 98rem;
        align-items: center;
        .name {
          color: #303133;
          font-size: 28rem;
        }
        .arrow {
          display: block;
          width: 36rem;
          height: 36rem;
          margin-left: 20rem;
        }
      }
    }
  }
}
.cover {
  width: 750rem;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  textarea {
    outline: none;
    padding: 20rem;
    font-size: 30rem;
    letter-spacing: 0rem;
  }
}
.operation{
  justify-content: space-around;
    button{
      width: 40%;
      flex: none;
    }
  }
footer {
  display: flex;
  position: fixed;
  bottom: 0rem;
  width: 750rem;
  left: 0rem;
  
  button {
    flex: 1;
    background: rgb(38 147 51);
    height: 100rem;
    font-size: 40rem;
    font-weight: bold;
    color: #fff;
    border-radius: 10rem;
  }
}
</style>